<template>
  <div class="order_list_page">
    <div class="index_pic">
      <img :src="imgPath" alt="img">
    </div>
    <div class="no_order_tips" v-if="orderNum === 0">
      <div class="title_box">
        <div class="title">提示</div>
        <div class="box_content">还没有预约哦</div>
      </div>
      <div class="button_go_appoint">
        <yd-button type="primary" @click.native="goToAppoint">前往预约</yd-button>
      </div>
    </div>
    <div class="order_list" v-else>
      <yd-accordion>
        <yd-accordion-item v-for="(item, index) in orderList" :key="item.id" :title="`订单详情 - ${item.status === '0' ? '预约进行中' : item.status === '1' ? '已完成' : '已取消'}`" :open="index === 0">
          <div class="order_detail">
            <yd-flexbox class="list_one">
              <div class="list_label">办理业务：</div>
              <yd-flexbox-item>{{ item.webName }}</yd-flexbox-item>
            </yd-flexbox>
            <yd-flexbox class="list_one">
              <div class="list_label">预约排队时间：</div>
              <yd-flexbox-item>{{ item.orderTimeInfo }}</yd-flexbox-item>
            </yd-flexbox>
            <yd-flexbox class="list_one">
              <div class="list_label">提交时间：</div>
              <yd-flexbox-item>{{ item.orderDay }}</yd-flexbox-item>
            </yd-flexbox>
            <yd-flexbox class="list_one">
              <div class="list_label">手机号码：</div>
              <yd-flexbox-item>{{ item.telephone }}</yd-flexbox-item>
            </yd-flexbox>
            <yd-flexbox class="list_one">
              <div class="list_label">姓名：</div>
              <yd-flexbox-item>{{ item.name }}</yd-flexbox-item>
            </yd-flexbox>
            <yd-flexbox class="list_one">
              <div class="list_label">身份证号码：</div>
              <yd-flexbox-item>{{ item.wxId }}</yd-flexbox-item>
            </yd-flexbox>
            <yd-flexbox class="list_one">
              <div class="list_label">户口所在乡镇：</div>
              <yd-flexbox-item>{{ item.homeTown }}</yd-flexbox-item>
            </yd-flexbox>
            <div class="button_canc" v-if="item.status === '0'">
              <yd-button type="primary" @click.native="cancelOrder(item.id)">取消订单</yd-button>
            </div>
          </div>
        </yd-accordion-item>
      </yd-accordion>
    </div>
  </div>
</template>

<script>
import { getImgExplain, getStudentOrderInfoList, cancelStudentOrderInfo } from '@/api/appoint'
let openId = window.sessionStorage.getItem('openId') || ''

export default {
  name: 'order',
  data () {
    return {
      imgPath: '',
      orderNum: 0,
      orderList: []
    }
  },
  mounted () {
    this.getImg();
    this.getOrderList();
  },
  methods: {
    // 获取图片
    getImg () {
      getImgExplain().then(res => {
        this.imgPath = res.data.imgPath;
      })
    },
    // 获取订单列表
    getOrderList () {
      getStudentOrderInfoList({ openId }).then(res => {
        res = res.data;
        this.orderList = res;
        this.orderNum = res.length || 0;
      })
    },
    // 跳转预约页
    goToAppoint () {
      this.$router.push('/');
    },
    // 取消订单
    cancelOrder (id) {
      this.$dialog.confirm({
        title: '提示',
        mes: '您确定取消预约吗？',
        opts: () => {
          cancelStudentOrderInfo({ id }).then(res => {
            if (res.code === 200) {
              this.$dialog.toast({ mes: '取消成功', timeout: 1000 });
              this.getOrderList();
            } else {
              this.$dialog.toast({ mes: res.msg, timeout: 1000 });
            }
          })
        }
      });
    }
  }
}
</script>

<style lang="less">
.order_list_page {
  padding: .2rem;
  .index_pic {
    overflow: hidden;
    margin-bottom: .2rem;
    max-height: 218px;
    img {
      display: block;
      max-width: 100%;
      border: 0;
    }
  }
  .no_order_tips {
    .title_box {
      margin-bottom: .2rem;
      border: 1px solid #e1e5ec;
      .title {
        padding: .2rem;
        font-size: .28rem;
        background-color: #e1e5ec;
      }
      .box_content {
        padding: .4rem .2rem;
        text-align: center;
        background-color: #fff;
      }
    }
    .button_go_appoint {
      margin-top: .6rem;
      text-align: center;
    }
  }
  .order_list {
    .yd-accordion-head {
      background-color: #e1e5ec;
    }
    .order_detail {
      padding: .4rem .2rem;
      .list_one {
        padding: .2rem 0;
      }
      .list_label {
        width: 2.4rem;
      }
      .button_canc {
        margin-top: .2rem;
        text-align: right;
      }
    }
  }
}
</style>
